<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部 -->
      <el-card>
        <el-row type="flex">
          <div style="margin-right: 70px">
            <!-- <img src="@/assets/common/head.jpg"> -->
            <img v-imgerr="require('@/assets/common/head.jpg')" :src="ruleForm.staffPhoto">
          </div>
          <div style="font-size: 15px; color: #5d5e5f">
            <!-- <el-row> -->
            <div>
              {{ ruleForm.username }}
              <el-tag size="mini" type="danger" effect="dark">{{
                ruleForm.inServiceStatus === 0 ? "在职" : "离职"
              }}</el-tag>
            </div>
            <div>
              <span style="margin-right: 30px">最新工资基数</span>
              <span
                style="margin-right: 30px"
              >入职时间 {{ ruleForm.timeOfEntry | formatDate }}</span>
              <span>联系电话 {{ ruleForm.mobile }}</span>
            </div>
            <div style="margin-top: 20px">
              <span
                style="margin-right: 30px"
              >本月不缴纳社保
                <el-switch
                  v-model="ruleForm.enterprisesPaySocialSecurityThisMonth"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                /></span>
              <span>本月不缴纳公积金
                <el-switch
                  v-model="ruleForm.enterprisesPayTheProvidentFundThisMonth"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                /></span>
            </div>
            <!-- </el-row> -->
          </div>
        </el-row>
      </el-card>
      <!-- 表单部分 -->
      <el-card style="margin-top: 20px">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="参保城市" prop="participatingInTheCity">
            <el-select
              v-model="ruleForm.participatingInTheCity"
              placeholder="请选择参保城市"
            >
              <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.name"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="社保类型" prop="socialSecurityType">
            <el-select
              v-model="ruleForm.socialSecurityType"
              placeholder="请选择社保类型"
            >
              <el-option label="首次开户" :value="1" />
              <el-option label="非首次开户" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="户籍类型" prop="householdRegistrationType">
            <el-select
              v-model="ruleForm.householdRegistrationType"
              placeholder="请选择户籍类型"
            >
              <el-option label="本市城镇" :value="1" />
              <el-option label="本市农村" :value="2" />
              <el-option label="外埠城镇" :value="3" />
              <el-option label="外埠农村" :value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="社保基数" prop="socialSecurityBase">
            <el-row type="flex">
              <el-col>
                <el-input
                  v-model="ruleForm.socialSecurityBase"
                  style="width: 450px"
                />
              </el-col>
              <el-col :span="24">
                <span style="margin-left: 10px">(基数范围是3387-25401)</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="工伤比例" prop="industrialInjuryRatio">
            <el-row type="flex">
              <el-col>
                <el-input
                  v-model="ruleForm.industrialInjuryRatio"
                  style="width: 450px"
                />
              </el-col>
              <el-col :span="24">
                <span
                  style="margin-left: 10px"
                >(比例范围是2.0%-3%,推荐0.2%)</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="社保缴纳">
            <el-row type="flex">
              <el-form-item label="个人" label-width="70px">
                <!-- <el-input v-model="ruleForm.personalPayment" disabled style="width:250px" /> -->
                <!-- 使用计算属性求和 -->
                <el-input
                  v-model="personalPayment"
                  disabled
                  style="width: 250px"
                />
              </el-form-item>
              <el-form-item label="公司" label-width="70px">
                <el-input
                  v-model="personalPaymentComp"
                  disabled
                  style="width: 250px"
                />
              </el-form-item>
            </el-row>
            <!-- 表格 -->
            <el-form-item style="margin-top: 20px">
              <el-table
                :data="cityItem"
                style="width: 100%"
                :header-cell-style="{ background: '#fafafa' }"
              >
                <el-table-column prop="name" label="缴费项目" width="180" />
                <el-table-column
                  prop="socialSecurityBase"
                  label="企业基数"
                  width="180"
                />
                <el-table-column prop="scaleCompany" label="企业比例">
                  <template #default="{ row }">
                    {{ row.scaleCompany }}%
                  </template>
                </el-table-column>
                <el-table-column label="企业缴纳">
                  <template #default="{ row }">
                    <el-input
                      disabled
                      :value="row.enterpriseProvidentFundPayment"
                    /></template>
                </el-table-column>
                <el-table-column label="个人基数">
                  <template #default="{ row }">
                    {{ row.user.socialSecurityBase }}
                  </template>
                </el-table-column>
                <el-table-column prop="scalePersonal" label="个人比例">
                  <template #default="{ row }">
                    {{ row.scalePersonal }}%
                  </template>
                </el-table-column>
                <!-- personalProvidentFundPayment -->
                <el-table-column label="个人缴纳">
                  <template #default="{ row }">
                    <el-input
                      disabled
                      :value="row.personalProvidentFundPayment"
                    /></template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-form-item>
          <!-- 文本域 v-model="socialSecurityNotes" -->
          <el-form-item label="社保备注">
            <el-input
              v-model="ruleForm.socialSecurityNotes"
              type="textarea"
              placeholder="1-300字符"
              style="width: 400px"
              maxlength="300"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="公积金城市" prop="providentFundCity">
            <el-select
              v-model="ruleForm.providentFundCity"
              placeholder="请选择公积金城市"
            >
              <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.name"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="公积金基数" prop="providentFundBase">
            <el-row type="flex">
              <el-col>
                <el-input
                  v-model="ruleForm.providentFundBase"
                  style="width: 450px"
                />
              </el-col>
              <el-col :span="24">
                <span style="margin-left: 10px">(基数范围是2273-25401)</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="企业比例" prop="enterpriseProportion">
            <el-row type="flex">
              <el-col>
                <el-input
                  v-model="ruleForm.enterpriseProportion"
                  style="width: 450px"
                  placeholder="12"
                />
              </el-col>
              <el-col :span="24">
                <span
                  style="margin-left: 10px"
                >(比例范围是5%-12%,推荐12%)</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="个人比例" prop="personalProportion">
            <el-row type="flex">
              <el-col>
                <el-input
                  v-model="ruleForm.personalProportion"
                  style="width: 450px"
                  placeholder="12"
                />
              </el-col>
              <el-col :span="24">
                <span
                  style="margin-left: 10px"
                >(比例范围是5%-12%,推荐12%)</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="公积金缴纳">
            <el-row type="flex">
              <!-- <span style="margin:0 10px 0 20px" prop="name">个人</span> -->
              <el-form-item
                label="个人"
                prop="personalProvidentFundPayment"
                label-width="50px"
              >
                <el-input
                  v-model="ruleForm.personalProvidentFundPayment"
                  style="width: 250px"
                  placeholder="个人"
                />
              </el-form-item>
              <!-- <span style="margin:0 10px 0 20px">公司</span>
              <el-input v-model="ruleForm.name" style="width:250px" /> -->
              <el-form-item
                label="公司"
                prop="enterpriseProvidentFundPayment"
                label-width="60px"
              >
                <el-input
                  v-model="ruleForm.enterpriseProvidentFundPayment"
                  style="width: 250px"
                  placeholder="企业"
                />
                <span
                  style="margin-left: 10px"
                >(为自动测算结果,可手动调整)</span>
              </el-form-item>
            </el-row>
          </el-form-item>
          <el-form-item
            label="公积金备注"
          >
            <el-input
              v-model="ruleForm.providentFundNotes"
              type="textarea"
              placeholder="1-300字符"
              style="width: 400px"
              maxlength="300"
              show-word-limit
            />
          </el-form-item>
          <el-form-item>
            <el-button
              size="mini"
              type="primary"
              @click="submitForm"
            >保存更新</el-button>
            <el-button
              size="mini"
              @click="resetForm"
            >取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
// 保存或跟新社保数据
import {
  updateUserList,
  getUserList,
  getCityList,
  getPaymentItemList,
  getSocialList
} from '@/api/social'
// import { registerLocale } from 'echarts/core'
// import { formatDate } from '@/filters/index'
export default {
  data() {
    return {
      perposum: 0, // 个人缴纳
      companysum: 0, // 企业缴纳
      cityId: '', // 参保城市id
      cityItem: [], // 参保项目
      value: true, // 本月不缴纳社保
      value1: false, // 本月不缴纳公积金
      userlist: {}, // 员工基本信息
      usslist: {}, // 社保详情
      cityList: [], // 参保城市
      tableData: [],
      ruleForm: {
        participatingInTheCity: '', // 参保城市
        socialSecurityType: '', // 社保类型
        householdRegistrationType: '', // 户籍类型
        socialSecurityBase: '', // 社保基数
        industrialInjuryRatio: '', // 工伤比例
        socialSecurityNotes: '', // 社保备注
        providentFundCity: '', // 公积金城市
        providentFundBase: '', // 公积金基数
        enterpriseProportion: '', // 公积金企业比例
        personalProportion: '', // 公积金个人比例
        personalProvidentFundPayment: '', // 公积金个人缴纳数额
        enterpriseProvidentFundPayment: '' // 公积金企业缴纳数额
      },
      rules: {
        // name: [
        //   { required: true, message: '请输入活动名称', trigger: 'blur' },
        //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ],
        participatingInTheCity: [
          { required: true, message: '请选择参保城市', trigger: 'input' }
        ],
        socialSecurityType: [
          { required: true, message: '请选择社保类型', trigger: 'input' }
        ],
        householdRegistrationType: [
          { required: true, message: '请选择户籍类型', trigger: 'input' }
        ],
        socialSecurityBase: [
          { required: true, message: '社保基数不能为空', trigger: 'blur' }
        ],
        industrialInjuryRatio: [
          { required: true, message: '工伤比例不能为空', trigger: 'blur' }
        ],
        providentFundCity: [
          { required: true, message: '请选择公积金保城市', trigger: 'input' }
        ],
        providentFundBase: [
          { required: true, message: '公积金基数不能为空', trigger: 'blur' }
        ],
        enterpriseProportion: [
          { required: true, message: '企业比例不能为空', trigger: 'blur' }
        ],
        personalProportion: [
          { required: true, message: '个人比例不能为空', trigger: 'blur' }
        ],
        personalProvidentFundPayment: [
          { required: true, message: '个人缴纳数额不能为空', trigger: 'blur' }
        ],
        enterpriseProvidentFundPayment: [
          { required: true, message: '企业缴纳数额不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  // 计算属性
  computed: {
    // 个人缴纳
    personalPayment() {
      this.cityItem.forEach((item) => {
        this.perposum += item.personalProvidentFundPayment
        // console.log(item)
      })
      return this.perposum
    },
    // 企业缴纳
    personalPaymentComp() {
      this.cityItem.forEach((item) => {
        this.companysum += item.enterpriseProvidentFundPayment
        // console.log(item)
      })
      return this.companysum
    }
  },
  created() {
    // 获取基本数据
    this.getUserList()
    // 获取参保城市列表
    this.getCityList()
    // 获取当前参保城市参保项目
    // this.getPaymentItemList()
  },
  methods: {
    // 数据回显
    async getUserList() {
      // console.log(this.$route)
      // this.ruleForm.id = this.$route.query.id
      const { userSocialSecurity, user } = await getUserList(
        this.$route.params.id
      )
      // const res = await getUserList(this.$route.query.id)
      // console.log(user, userSocialSecurity)
      // console.log(res)
      // this.userlist = { ...user }
      // this.usslist = { ...userSocialSecurity }
      this.ruleForm = { ...user, ...userSocialSecurity }
      this.cityId = this.ruleForm.participatingInTheCityId
      // console.log(1, this.ruleForm)
      // 继续改造数据
      // 发请求获取企业用户社保列表  因为里面有社保基数
      const { total } = await getSocialList()
      const { rows } = await getSocialList({ pageSize: total })
      // console.log(this.$route.query.id)
      // 过滤出当前用户的数据
      const res = rows.filter((item) => {
        return item.id === this.$route.params.id
        // console.log(item)
      })
      // console.log(res)
      // console.log(res[0])
      // this.cityItem = { ...this.cityItem,res[0] }
      // 发请求获取参保城市参保列表
      this.cityItem = await getPaymentItemList(
        this.ruleForm.participatingInTheCityId
      )
      // console.log(2, userSocialSecurity)
      this.cityItem = this.cityItem.map((item) => {
        // console.log(item)
        return { ...item, ...userSocialSecurity, user: res[0] }
      })

      // this.cityItem = { ...this.cityItem,res[0] }
      // console.log(this.cityItem)
    },
    // 获取社保城市列表
    async getCityList() {
      this.cityList = await getCityList()
      // console.log(this.cityList)
    },
    // 点击保存更新
    async submitForm() {
      // console.log(this.ruleForm)
      // 二次校验
      await this.$refs.ruleForm.validate()
      // 发请求
      await updateUserList(this.ruleForm)
      // 提示
      this.$message.success('更新成功')
      // 回退
      this.$router.back()
    },
    // 点击取消
    resetForm() {
      // 回退
      this.$router.back()
    }
    // // 获取参保城市
    // getPayment(value) {
    //   this.cityId = value.id
    //   console.log(this.cityId)
    // },
  }
}
</script>

<style lang="scss" scoped>
</style>
